<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统设置 - CRUD Generator</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Common CSS -->
    <link href="/css/common.css" rel="stylesheet">
    
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background: #f8f9fa;
            padding-top: 80px;
        }
        
        .navbar {
            background: white !important;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
        }
        
        .main-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .page-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 20px;
            padding: 40px;
            margin-bottom: 30px;
            text-align: center;
        }
        
        .settings-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
            overflow: hidden;
            margin-bottom: 30px;
        }
        
        .card-header {
            background: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
            padding: 20px 25px;
            font-weight: 600;
        }
        
        .card-body {
            padding: 25px;
        }
        
        .setting-item {
            border-bottom: 1px solid #e9ecef;
            padding: 20px 0;
        }
        
        .setting-item:last-child {
            border-bottom: none;
        }
        
        .setting-label {
            font-weight: 500;
            margin-bottom: 5px;
        }
        
        .setting-description {
            color: #6c757d;
            font-size: 0.9rem;
            margin-bottom: 15px;
        }
        
        .form-control, .form-select {
            border-radius: 8px;
            border: 1px solid #e9ecef;
            padding: 12px 15px;
        }
        
        .form-control:focus, .form-select:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
        
        .btn-save {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 8px;
            padding: 12px 30px;
            color: white;
            font-weight: 500;
        }
        
        .btn-save:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(0,0,0,0.2);
            color: white;
        }
        
        .status-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 8px;
        }
        
        .status-online {
            background: #28a745;
        }
        
        .status-offline {
            background: #dc3545;
        }
        
        .status-warning {
            background: #ffc107;
        }
        
        .connection-test {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 15px;
            margin-top: 15px;
        }
        
        .nav-pills .nav-link {
            border-radius: 10px;
            margin-right: 10px;
            color: #6c757d;
            font-weight: 500;
        }
        
        .nav-pills .nav-link.active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .alert-custom {
            border: none;
            border-radius: 10px;
            padding: 15px 20px;
        }
        
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }
        
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }
        
        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        input:checked + .slider {
            background-color: #667eea;
        }
        
        input:checked + .slider:before {
            transform: translateX(26px);
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <div th:replace="fragments/navigation :: navbar"></div>

    <div class="main-content">
        <!-- Page Header -->
        <div class="page-header">
            <h1 class="display-5 mb-3">
                <i class="bi bi-gear me-3"></i>
                系统设置
            </h1>
            <p class="lead mb-0">配置系统参数和数据库连接设置</p>
        </div>

        <!-- Settings Navigation -->
        <ul class="nav nav-pills mb-4" id="settingsTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="database-tab" data-bs-toggle="pill" data-bs-target="#database" type="button" role="tab">
                    <i class="bi bi-database me-2"></i>数据库配置
                </button>
            </li>

            <li class="nav-item" role="presentation">
                <button class="nav-link" id="generator-tab" data-bs-toggle="pill" data-bs-target="#generator" type="button" role="tab">
                    <i class="bi bi-code me-2"></i>代码生成配置
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="system-tab" data-bs-toggle="pill" data-bs-target="#system" type="button" role="tab">
                    <i class="bi bi-gear me-2"></i>系统配置
                </button>
            </li>
        </ul>

        <div class="tab-content" id="settingsTabContent">
            <!-- Database Settings -->
            <div class="tab-pane fade show active" id="database" role="tabpanel">
                <div class="settings-card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="bi bi-database me-2"></i>数据库连接配置
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="setting-item">
                            <div class="setting-label">数据库类型</div>
                            <div class="setting-description">选择要使用的数据库类型</div>
                            <select class="form-select" id="dbType">
                                <option value="mysql">MySQL</option>
                                <option value="postgresql">PostgreSQL</option>
                                <option value="h2">H2 Database</option>
                                <option value="oracle">Oracle</option>
                            </select>
                        </div>
                        
                        <div class="setting-item">
                            <div class="setting-label">数据库主机</div>
                            <div class="setting-description">数据库服务器的IP地址或域名</div>
                            <input type="text" class="form-control" id="dbHost" value="localhost" placeholder="localhost">
                        </div>
                        
                        <div class="setting-item">
                            <div class="setting-label">端口号</div>
                            <div class="setting-description">数据库服务器的端口号</div>
                            <input type="number" class="form-control" id="dbPort" value="3306" placeholder="3306">
                        </div>
                        
                        <div class="setting-item">
                            <div class="setting-label">数据库名称</div>
                            <div class="setting-description">要连接的数据库名称</div>
                            <input type="text" class="form-control" id="dbName" value="crud_generator" placeholder="database_name">
                        </div>
                        
                        <div class="setting-item">
                            <div class="setting-label">用户名</div>
                            <div class="setting-description">数据库登录用户名</div>
                            <input type="text" class="form-control" id="dbUsername" value="root" placeholder="username">
                        </div>
                        
                        <div class="setting-item">
                            <div class="setting-label">密码</div>
                            <div class="setting-description">数据库登录密码</div>
                            <input type="password" class="form-control" id="dbPassword" placeholder="password">
                        </div>
                        
                        <div class="connection-test">
                            <div class="d-flex align-items-center justify-content-between">
                                <div>
                                    <span class="status-indicator status-online"></span>
                                    <strong>连接状态：</strong>
                                    <span id="dbStatus">已连接</span>
                                </div>
                                <button class="btn btn-outline-primary btn-sm" onclick="testDatabaseConnection()">
                                    <i class="bi bi-arrow-clockwise me-1"></i>测试连接
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



            <!-- Generator Settings -->
            <div class="tab-pane fade" id="generator" role="tabpanel">
                <div class="settings-card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="bi bi-code me-2"></i>代码生成配置
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="setting-item">
                            <div class="setting-label">输出目录</div>
                            <div class="setting-description">生成代码的输出目录</div>
                            <input type="text" class="form-control" id="outputDir" value="./generated" placeholder="./generated">
                        </div>
                        
                        <div class="setting-item">
                            <div class="setting-label">包名前缀</div>
                            <div class="setting-description">生成Java类的包名前缀</div>
                            <input type="text" class="form-control" id="packagePrefix" value="com.example" placeholder="com.example">
                        </div>
                        
                        <div class="setting-item">
                            <div class="setting-label">作者信息</div>
                            <div class="setting-description">生成代码中的作者注释</div>
                            <input type="text" class="form-control" id="author" value="CRUD Generator" placeholder="Your Name">
                        </div>
                        
                        <div class="setting-item">
                            <div class="setting-label">生成Swagger注解</div>
                            <div class="setting-description">是否在生成的Controller中包含Swagger API文档注解</div>
                            <label class="switch">
                                <input type="checkbox" id="generateSwagger" checked>
                                <span class="slider"></span>
                            </label>
                        </div>
                        
                        <div class="setting-item">
                            <div class="setting-label">生成单元测试</div>
                            <div class="setting-description">是否生成对应的单元测试文件</div>
                            <label class="switch">
                                <input type="checkbox" id="generateTests" checked>
                                <span class="slider"></span>
                            </label>
                        </div>
                        
                        <div class="setting-item">
                            <div class="setting-label">代码格式化</div>
                            <div class="setting-description">是否对生成的代码进行格式化</div>
                            <label class="switch">
                                <input type="checkbox" id="formatCode" checked>
                                <span class="slider"></span>
                            </label>
                        </div>
                        
                        <div class="setting-item">
                            <div class="setting-label">模板引擎</div>
                            <div class="setting-description">选择代码生成使用的模板引擎</div>
                            <select class="form-select" id="templateEngine">
                                <option value="freemarker">FreeMarker</option>
                                <option value="velocity">Velocity</option>
                                <option value="thymeleaf">Thymeleaf</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <!-- System Settings -->
            <div class="tab-pane fade" id="system" role="tabpanel">
                <div class="settings-card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="bi bi-gear me-2"></i>系统配置
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="setting-item">
                            <div class="setting-label">系统语言</div>
                            <div class="setting-description">选择系统界面语言</div>
                            <select class="form-select" id="systemLanguage">
                                <option value="zh-CN">简体中文</option>
                                <option value="en-US">English</option>
                                <option value="ja-JP">日本語</option>
                            </select>
                        </div>
                        
                        <div class="setting-item">
                            <div class="setting-label">主题模式</div>
                            <div class="setting-description">选择系统的主题模式</div>
                            <select class="form-select" id="themeMode">
                                <option value="light">浅色模式</option>
                                <option value="dark">深色模式</option>
                                <option value="auto">跟随系统</option>
                            </select>
                        </div>
                        
                        <div class="setting-item">
                            <div class="setting-label">日志级别</div>
                            <div class="setting-description">设置系统日志的详细程度</div>
                            <select class="form-select" id="logLevel">
                                <option value="ERROR">ERROR</option>
                                <option value="WARN">WARN</option>
                                <option value="INFO" selected>INFO</option>
                                <option value="DEBUG">DEBUG</option>
                                <option value="TRACE">TRACE</option>
                            </select>
                        </div>
                        
                        <div class="setting-item">
                            <div class="setting-label">自动保存</div>
                            <div class="setting-description">是否自动保存用户的操作和设置</div>
                            <label class="switch">
                                <input type="checkbox" id="autoSave" checked>
                                <span class="slider"></span>
                            </label>
                        </div>
                        
                        <div class="setting-item">
                            <div class="setting-label">错误报告</div>
                            <div class="setting-description">是否自动发送错误报告以帮助改进系统</div>
                            <label class="switch">
                                <input type="checkbox" id="errorReporting">
                                <span class="slider"></span>
                            </label>
                        </div>
                        
                        <div class="setting-item">
                            <div class="setting-label">缓存大小 (MB)</div>
                            <div class="setting-description">系统缓存的最大大小</div>
                            <input type="number" class="form-control" id="cacheSize" value="100" placeholder="100">
                        </div>
                        
                        <div class="setting-item">
                            <div class="setting-label">会话超时 (分钟)</div>
                            <div class="setting-description">用户会话的超时时间</div>
                            <input type="number" class="form-control" id="sessionTimeout" value="30" placeholder="30">
                        </div>
                    </div>
                </div>
                
                <!-- System Information -->
                <div class="settings-card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="bi bi-info-circle me-2"></i>系统信息
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>系统版本：</strong> v1.0.0</p>
                                <p><strong>构建时间：</strong> 2024-01-16 10:30:00</p>
                                <p><strong>Java版本：</strong> 11.0.16</p>
                                <p><strong>Spring Boot版本：</strong> 2.7.0</p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>运行时间：</strong> <span id="uptime">2天 5小时 30分钟</span></p>
                                <p><strong>内存使用：</strong> <span id="memoryUsage">256MB / 1GB</span></p>
                                <p><strong>CPU使用率：</strong> <span id="cpuUsage">15%</span></p>
                                <p><strong>磁盘空间：</strong> <span id="diskUsage">2.5GB / 10GB</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Common JS -->
    <script src="/js/common.js"></script>

    <script>
        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            loadSettings();
            updateSystemInfo();
        });

        function loadSettings() {
            // Load settings from localStorage or API
            const settings = JSON.parse(localStorage.getItem('systemSettings') || '{}');
            
            // Apply loaded settings to form fields
            Object.keys(settings).forEach(key => {
                const element = document.getElementById(key);
                if (element) {
                    if (element.type === 'checkbox') {
                        element.checked = settings[key];
                    } else {
                        element.value = settings[key];
                    }
                }
            });
        }

        function saveAllSettings() {
            const settings = {};
            
            // Collect all form values
            const formElements = document.querySelectorAll('input, select');
            formElements.forEach(element => {
                if (element.id) {
                    if (element.type === 'checkbox') {
                        settings[element.id] = element.checked;
                    } else {
                        settings[element.id] = element.value;
                    }
                }
            });
            
            // Save to localStorage
            localStorage.setItem('systemSettings', JSON.stringify(settings));
            
            Utils.showToast('设置已保存', 'success');
        }

        function testDatabaseConnection() {
            const dbHost = document.getElementById('dbHost').value;
            const dbPort = document.getElementById('dbPort').value;
            const dbName = document.getElementById('dbName').value;
            
            Utils.showLoading();
            
            // Simulate API call
            setTimeout(() => {
                Utils.hideLoading();
                
                const statusElement = document.getElementById('dbStatus');
                const indicator = statusElement.previousElementSibling;
                
                if (dbHost && dbPort && dbName) {
                    statusElement.textContent = '连接成功';
                    indicator.className = 'status-indicator status-online';
                    Utils.showToast('数据库连接测试成功', 'success');
                } else {
                    statusElement.textContent = '连接失败';
                    indicator.className = 'status-indicator status-offline';
                    Utils.showToast('数据库连接测试失败', 'error');
                }
            }, 2000);
        }



        function saveAllSettings() {
            // 保存所有设置
            const settings = {
                database: {
                    type: document.getElementById('dbType').value,
                    host: document.getElementById('dbHost').value,
                    port: document.getElementById('dbPort').value,
                    name: document.getElementById('dbName').value,
                    username: document.getElementById('dbUsername').value,
                    password: document.getElementById('dbPassword').value
                },
                generator: {
                    outputDir: document.getElementById('outputDir').value,
                    packagePrefix: document.getElementById('packagePrefix').value,
                    author: document.getElementById('author').value,
                    generateSwagger: document.getElementById('generateSwagger').checked,
                    generateTests: document.getElementById('generateTests').checked,
                    formatCode: document.getElementById('formatCode').checked,
                    templateEngine: document.getElementById('templateEngine').value
                },
                system: {
                    language: document.getElementById('systemLanguage').value,
                    theme: document.getElementById('themeMode').value,
                    logLevel: document.getElementById('logLevel').value
                }
            };

            // 发送到后端保存
            fetch('/api/settings/save', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(settings)
            })
            .then(response => response.json())
            .then(data => {
                if(data.success) {
                    Utils.showToast('设置已保存', 'success');
                } else {
                    Utils.showToast('保存设置失败', 'error');
                }
            })
            .catch(error => {
                console.error('保存设置时发生错误:', error);
                Utils.showToast('保存设置时发生错误', 'error');
            });
        }

        function testConnections() {
            Utils.showLoading();
            
            setTimeout(() => {
                Utils.hideLoading();
                Utils.showToast('所有连接测试完成', 'info');
                testDatabaseConnection();
    
            }, 1000);
        }

        function updateSystemInfo() {
            // Update system information periodically
            setInterval(() => {
                // Simulate updating system metrics
                const uptime = Math.floor(Math.random() * 100) + 100;
                const memory = Math.floor(Math.random() * 500) + 200;
                const cpu = Math.floor(Math.random() * 50) + 10;
                const disk = (Math.random() * 5 + 2).toFixed(1);
                
                document.getElementById('uptime').textContent = `${Math.floor(uptime/24)}天 ${uptime%24}小时 ${Math.floor(Math.random()*60)}分钟`;
                document.getElementById('memoryUsage').textContent = `${memory}MB / 1GB`;
                document.getElementById('cpuUsage').textContent = `${cpu}%`;
                document.getElementById('diskUsage').textContent = `${disk}GB / 10GB`;
            }, 5000);
        }

        // Auto-save settings when changed
        document.addEventListener('change', function(e) {
            if (e.target.matches('input, select')) {
                const autoSave = document.getElementById('autoSave');
                if (autoSave && autoSave.checked) {
                    saveAllSettings();
                }
            }
        });
    </script>
</body>
</html>